<template>
    <div class="root-view">
        <div class="top fz18">发布的需求</div>
        <div class="form" v-if="tableData.length > 0">
            <!-- <table border="1px" cellspacing="0px" style="
                    border-collapse: collapse;
                    border-color: #d2dbe2;
                    font-size: 14px;
                ">
                <tr>
                    <th style="width: 263px; height: 50px; background: #eff5fa" v-for="item in tableHeader" :key="item">
                        {{ item }}
                    </th>
                </tr>
                <tr v-for="(item, index) in tableData" :key="index" style="height: 50px">
                    <td>{{ item.name }}</td>
                    <td>{{ item.createtime_text }}</td>
                    <td>{{ getStatus(item.status) }}</td>
                    <td style="cursor: pointer">
                        <span @click="goInfo(item)" v-if="item.status != 2">详情
                        </span>
                        <span @click.stop="close(item)" v-if="item.status == 0">| 关闭</span>
                        <span @click.stop="del(item)" v-if="item.status == 2">删除</span>
                    </td>
                </tr>
            </table> -->


            <!-- <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
                :tree-props="{ children: 'order', hasChildren: 'hasChildren' }">
                <el-table-column prop="name" label="需求名称">
                </el-table-column>
                <el-table-column align="center" prop="createtime_text" label="提交时间">
                </el-table-column>
                <el-table-column align="center" prop="status_name" label="状态">
                </el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status != 5"
                            @click.native.prevent="goDetail(scope.$index, scope.row)" type="text" size="small">
                            详情
                        </el-button>
                        <el-button v-if="!scope.row.demand_id && scope.row.status == 0"
                            @click.native.prevent="close(scope.row)" type="text" size="small">
                            关闭
                        </el-button>
                        <el-button v-if="!scope.row.demand_id && scope.row.status == 2"
                            @click.native.prevent="del(scope.row)" type="text" size="small">
                            删除
                        </el-button>
                        <el-button v-if="userInfo && scope.row.demand_id && scope.row.status == 3"
                            @click.native.prevent="goDetail(scope.$index, scope.row)" type="text" size="small">
                            立即支付
                        </el-button>
                        <el-button v-if="userInfo && scope.row.demand_id && scope.row.status == 5"
                            @click.native.prevent="editStatus(scope.row, 6)" type="text" size="small">
                            验收通过
                        </el-button>
                        <el-button v-if="userInfo && scope.row.demand_id && scope.row.status == 5"
                            @click.native.prevent="kefuShow = true" type="text" size="small">
                            联系客服
                        </el-button>
                        
                    </template>
</el-table-column>
</el-table> -->

            <div class="tabsl">
                <div class="topth">
                    <div class="" style="width: 100%;">需求名称</div>
                    <div class="" style="min-width: 190px;">状态</div>
                    <div class="" style="min-width: 190px;">操作</div>
                </div>
                <div v-for="(item, index) in tableData" :key="index" class="td">
                    <div class="time">
                        {{ item.createtime_text }}
                    </div>
                    <div class="xuqiu">
                        <i :class="[item.height ? 'el-icon-arrow-down' : 'el-icon-arrow-right']"
                            :style="{ color: item.order && item.order.length > 0 ? '' : '#F7F8FA' }"
                            @click="item.height = item.height ? 0 : 'auto'"></i>
                        <div class="name">{{ item.name }}</div>
                        <div class="status">{{ item.status_name }}</div>
                        <div class="caozuo">
                            <el-button v-if="item.status != 5" @click.native.prevent="goDetail(index, item)" type="text"
                                size="small">
                                详情
                            </el-button>
                            <el-button v-if="!item.demand_id && item.status == 0" @click.native.prevent="close(item)"
                                type="text" size="small">
                                关闭
                            </el-button>
                            <el-button v-if="!item.demand_id && item.status == 2" @click.native.prevent="del(item)"
                                type="text" size="small">
                                删除
                            </el-button>
                            <el-button v-if="userInfo && item.demand_id && item.status == 3"
                                @click.native.prevent="goDetail(index, item)" type="text" size="small">
                                立即支付
                            </el-button>
                            <el-button v-if="userInfo && item.demand_id && item.status == 5"
                                @click.native.prevent="editStatus(item, 6)" type="text" size="small">
                                验收通过
                            </el-button>
                            <el-button v-if="userInfo && item.demand_id && item.status == 5"
                                @click.native.prevent="kefuShow = true" type="text" size="small">
                                联系客服
                            </el-button>
                        </div>
                    </div>
                    <div :style="{ height: item.height }" class="toubiao">
                        <div v-for="(d, i) in item.order" :key="i" class="toubiao_item">
                            <img src="~/assets/images/userCenter/service_user_order_icon.png" alt="">
                            <div class="name">{{ d.name }}</div>
                            <div class="date">{{ d.createtime_text }}</div>
                            <div class="status">{{ d.status_name }}</div>
                            <div class="caozuo">
                                <el-button v-if="d.status != 5" @click.native.prevent="goDetail(i, d)" type="text"
                                    size="small">
                                    详情
                                </el-button>
                                <el-button v-if="!d.demand_id && d.status == 0" @click.native.prevent="close(d)"
                                    type="text" size="small">
                                    关闭
                                </el-button>
                                <el-button v-if="!d.demand_id && d.status == 2" @click.native.prevent="del(d)"
                                    type="text" size="small">
                                    删除
                                </el-button>
                                <el-button v-if="userInfo && d.demand_id && d.status == 3"
                                    @click.native.prevent="goDetail(i, d)" type="text" size="small">
                                    立即支付
                                </el-button>
                                <el-button v-if="userInfo && d.demand_id && d.status == 5"
                                    @click.native.prevent="editStatus(d, 6)" type="text" size="small">
                                    验收通过
                                </el-button>
                                <el-button v-if="userInfo && d.demand_id && d.status == 5"
                                    @click.native.prevent="kefuShow = true" type="text" size="small">
                                    联系客服
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!--分页 -->
            <div class="page">
                <el-pagination :current-page="page" background layout="prev, pager, next" :page-size="100" :total="5">
                </el-pagination>
            </div>
        </div>
        <div v-else class="no-data" style="text-align: center;">
            <el-empty description="暂无需求"></el-empty>
            <el-button type="primary" plain round @click="goPostDemand">发布需求</el-button>
        </div>

        <el-dialog title="联系客服" :visible.sync="kefuShow" width="300px" center>
            <div class="pay_code">
                <img src="~/assets/images/wx-qifu-kefu-code.jpg"
                    style="display: block;margin: 0 auto;width: 240px;height: 240px;" alt="">
                <div class="go_vip">微信扫码联系客服 ></div>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { getMyDemand, delMyDemand, closeMyDemand, hire_service_status_update } from "@/assets/api/service";
import { mapState } from "vuex"
import { getTime } from "@/assets/utils/utils";

export default {
    name: "mydemand",
    data() {
        return {
            kefuShow: false,
            tableHeader: ["需求名称", "提交时间", "状态", "操作"],
            tableData: [],
            page: 1,
            pagesize: 20,
            //状态显示
            getStatus(status) {
                var text = "";
                switch (status) {
                    case 0:
                        text = "需求中";
                        break;
                    case 1:
                        text = "已完成";
                        break;
                    case 2:
                        text = "已关闭";
                        break;
                    case 10:
                        text = "不可参与"
                        break
                }
                return text;
            },
            getStatusOrder(status) {
                var text = "";
                switch (status) {
                    case 0:
                        text = "取消";
                        break;
                    case 1:
                        text = "待确认";
                        break;
                    case 2:
                        text = "待服务商确认";
                        break;
                    case 3:
                        text = "待支付";
                        break;
                    case 4:
                        text = "已支付";
                        break;
                    case 5:
                        text = "待验收";
                        break;
                    case 6:
                        text = "已完成";
                        break;
                    case 7:
                        text = "已结算";
                        break;
                }
                return text;
            },
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {},
    created() { },
    beforeMount() { },
    mounted() {
        this.getMyDemand();
    },
    methods: {
        //获取我的需求列表
        async getMyDemand() {
            var params = {
                page: this.page,
                pagesize: this.pagesize,
            };
            let res = await getMyDemand(params);
            if (res.code == 1) {

                for (let item of res.data) {
                    item.status_name = this.getStatus(item.status)
                    item.height = 'auto'
                    if (item.order && item.order.length > 0) {
                        for (let e of item.order) {
                            e.createtime_text = getTime(e.createtime * 1000)
                            e.name = e.service_name
                            e.status_name = this.getStatusOrder(e.status)
                        }
                    }
                }
                this.tableData = res.data;
                console.log("获取我的订单", this.tableData);
            } else {
                this.$message({
                    message: res.msg,
                    type: "warning",
                });
            }
        },

        // 操作
        handle(index, row) {
            console.log(index, row)
        },

        goDetail(index, row) {
            if (row.demand_id) {
                this.$router.push({
                    path: '/service/placeorder?id=' + row.id
                })
            } else {
                this.$router.push({
                    path: '/service/demanddetail?id=' + row.id
                })
            }
        },

        // 修改状态
        async editStatus(row, status) {
            let text = '确认验收通过'
            this.$alert(text, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action == 'confirm')
                        this.hireServiceSubmitStatus(row, status)
                }
            });

        },

        async hireServiceSubmitStatus(row, status) {
            const res = await hire_service_status_update({
                id: row.id,
                status: status,
            })
            if (res.code == 1) {
                this.getMyDemand()
            }
        },



        //进需求详情
        goInfo(item) {
            this.$router.push({
                path: `/service/demanddetail?id=${item.id}`,
            });
        },
        //关闭需求
        async close(item) {
            this.$confirm("确定关闭此需求吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.closeMyDemand(item.id);
                })
                .catch(() => { });
        },

        // 删除需求
        del(item) {
            this.$confirm("确定删除此需求吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.delMyDemand(item.id);
                })
                .catch(() => { });
        },

        async delMyDemand(id) {
            let res = await delMyDemand({ id: id });
            if (res.code == 1) {
                this.getMyDemand();
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
            } else {
                this.$message({
                    message: res.msg,
                    type: "warning",
                });
            }
        },

        async closeMyDemand(id) {
            let res = await closeMyDemand({ id: id });
            if (res.code == 1) {
                this.getMyDemand();
                this.$message({
                    message: "关闭成功",
                    type: "success",
                });
            } else {
                this.$message({
                    message: res.msg,
                    type: "warning",
                });
            }
        },

        goPostDemand() {
            this.$router.push({
                path: '/service/postdemand'
            })
        }

    },

    // 切换分页
    changePage(page) {
        this.page = page;
        this.getMyDemand();
    },

};
</script>
<style lang='scss' scoped>
::v-deep .el-dialog__header {
    padding: 20px 0 0;
}

::v-deep .el-dialog__body {
    padding-top: 15px;
}

.pay_code {

    .go_vip {
        padding-top: 10px;
        text-align: center;
        font-weight: 400;
        font-size: 12px;
        color: #909399;

    }

}

.root-view {
    margin-left: 30px;
    min-height: 1000px;
    background-color: #fff;

    .top {
        width: 100%;
        height: 80px;
        line-height: 80px;
        padding: 0 40px;
        border-bottom: 1px solid #ededed;
    }

    .form {
        padding: 35px 45px;
    }

    table,
    td,
    th {
        text-align: center;
    }

    .page {
        padding-top: 100px;
        padding-bottom: 63px;
        display: flex;
        justify-content: center;
    }
}



.tabsl {
    .topth {
        height: 60px;
        line-height: 60px;
        background: #F7F8FA;
        border-radius: 10px;
        text-align: center;
        font-size: 16px;
        color: #525355;
        display: flex;
        align-items: center;
    }

    .td {
        margin-top: 20px;
        border-radius: 10px;
        overflow: hidden;
        border-bottom: 1px solid #EEEEEE;

        .time {
            height: 38px;
            font-size: 16px;
            color: #000B1A;
            line-height: 38px;
            padding-left: 20px;
            background: #EFF1F4;
        }

        .xuqiu {
            display: flex;
            align-items: center;
            height: 68px;
            padding-left: 20px;
            background: #F7F8FA;

            i {
                margin-right: 42px;
                cursor: pointer;
            }

            .name {
                font-size: 16px;
                color: #060621;
                width: 100%;
            }

            .status {
                font-size: 16px;
                color: #060621;
                min-width: 190px;
                text-align: center;
            }

            .caozuo {
                font-size: 16px;
                color: #208FFF;
                min-width: 190px;
                text-align: center;
            }
        }

        .toubiao {}

        .toubiao_item {
            padding-left: 15px;
            display: flex;
            align-items: center;
            height: 68px;
            background-color: transparent;
            border-top: 1px solid #EEEEEE;
            border-left: 1px solid #EEEEEE;
            border-right: 1px solid #EEEEEE;

            img {
                width: 26px;
                height: auto;
                margin-right: 29px;
            }

            .name {
                font-size: 16px;
                color: #060621;
                width: 100%;
            }

            .date {
                min-width: 170px;
                font-size: 16px;
                color: #060621;
                margin-right: 10px;
            }

            .status {
                font-size: 16px;
                color: #060621;
                min-width: 190px;
                text-align: center;
            }

            .caozuo {
                font-size: 16px;
                color: #208FFF;
                min-width: 190px;
                text-align: center;
            }

        }

    }
}
</style>